<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.staticfile.org/vue/3.0.5/vue.global.js"></script>

</head>

<body>

    <div id="app">
    </div>

    <!-- 父组件 -->
    <template id="one">

        我是父组件，我显示我自己的内容：{{content}}
        <hr>
        <two :message="content">
            <button @click="myalert()">{{butname}}</button>
        </two>

        <two #slot1 :list="contents">
            <ul>
                <li ></li>
            </ul>
        </two>
    </template>

    <!-- 子组件 -->
    <template id="two">
        <div>
            
            <!-- 需要在同一组件内使用多个插槽显示不同内容时需要使用slot的name属性添加具名插槽 -->
            <slot>我是默认信息</slot>
            <hr>
            <slot name="slot1"></slot>
            <hr>
            我是子组件,我可以显示父组件中的内容:{{message}}
        </div>
    </template>

</body>
<script>

    /**
     * 所谓作用域插槽，就是在父组件中接收来自子组件插槽传递的属性，
     * 常用于组件在插槽中渲染列表而又希望自定义每项内容。
     * */
    let config = {
        data() {
            return {
                'butname': '我是一个父按钮',
                'content': '我一个父文本内容',
                "contents": ['张三','李四','王五']
            }
        },
        template: '#one',
        components: {
            'two': {
                template: '#two',
                props:['message']
            }
        },
        methods: {
            myalert() {
                
                let t = Math.random();
                this.content = '点击就会变'+t;
            }
        }
    }
    Vue.createApp(config).mount('#app');

</script>

</html>